<template>
  <div>
    <div class="swiper-container w">
      <Carousel
        v-model="value3"
        :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :radius-dot="setting.radiusDot"
        :trigger="setting.trigger"
        :arrow="setting.arrow"
      >
        <CarouselItem v-for="item of swiperList" :key="item.id">
          <div class="demo-carousel">
            <img class="swiper-img" :src="item.image">
          </div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="container-body w">
      <!-- 入驻的企业 -->
      <div class="card-container">
        <div class="title">
          <h2>热门企业</h2>
        </div>
        <Row :gutter="16">
          <div v-for="(item,index) in companylist" :key="index" @click="toCompanydetail(item.id)">
            <Col span="6">
              <Card style="width:260px;margin-top:20px">
                <div class="company" style="text-align:center">
                  <img class="logo" :src="item.logo ? item.logo : '/static/images/qy_uplogo.png'">
                  <h3 class="comname wordcut">{{item.comname}}</h3>
                  <div class="comtags wordcut">
                    <template>
                      <span v-for="(tag,indexs) in item.companywelfare" :key="indexs">{{tag}}</span>
                    </template>
                  </div>
                  <div class="address wordcut">{{item.adress}}</div>
                </div>
              </Card>
            </Col>
          </div>
        </Row>
        <div class="more">
          <router-link :to="{ name: 'companylist', params: {} }">
          <button class="more-btn">全部企业</button>
          </router-link>
        </div>
      </div>

      <!-- 热门职位 -->
      <div class="card-container">
        <div class="stitle">
          <h2>热门职位</h2>
        </div>
        <Row>
          <div v-for="(item,index) in recruitlist" :key="index">
            <Col span="8">
              <Card style="border-radius:0;">
                <div class="recruit" style="text-align:center" @click="toRecruitdetail(item.id)">
                  <div class="rtitle">
                    <div class="title-text wordcut">{{item.title}}</div>
                    <div class="salary-text">{{dbase.jobsalaries[item.salaryindex]}}</div>
                  </div>
                  <div class="rtags wordcut">
                    <span>{{dbase.degrees[item.degreesindex]}}</span>
                    <span>{{dbase.experiences[item.experiencesindex]}}</span>
                    <span>招{{item.recruitnum}}人</span>
                  </div>
                  <div class="wel wordcut">
                    <span v-for="(wel,indexs) in item.chosewelfare" :key="indexs">{{wel}}</span>
                  </div>
                  <div class="poster wordcut" v-if="item.isc == 1">
                    <div class="post-com">
                      <img
                        class="post-comlogo"
                        :src="item.cominfo.logo ? item.cominfo.logo : '/static/images/qy_uplogo.png'"
                        alt
                      >
                      <div class="post-cominfo">
                        <div class="cominfo-name">{{item.cominfo.comname}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="poster wordcut" v-if="item.isc == 2">
                    <div class="post-com">
                      <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt>
                      <div class="post-cominfo">
                        <div class="cominfo-name">个人实名发布者</div>
                      </div>
                    </div>
                  </div>
                  <div class="poster wordcut" v-if="item.isc == 0">
                    <div class="post-com">
                      <img class="post-comlogo" src="/static/images/qy_uplogo.png" alt>
                      <div class="post-cominfo">
                        <div class="cominfo-name">个人未实名发布者</div>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
          </div>
        </Row>
        <div class="more">
          <router-link :to="{ name: 'recruitlist', params: {} }">
          <button class="more-btn">查看更多</button>
          </router-link>
        </div>
      </div>

      <!-- 热门兼职 -->
      <div class="card-container">
        <div class="stitle">
          <span class></span>
          <h2>热门兼职</h2>
        </div>
        <Row>
          <div v-for="(item,index) in partjoblist" :key="item.id" @click="toPartjobdetail(item.id)">
            <Col span="8">
              <Card style="border-radius:0;">
                <div class="recruit" style="text-align:center">
                  <div class="rtitle">
                    <div class="title-text">{{item.posttitle}}</div>
                    <div
                      class="salary-text"
                    >{{item.salary}}元/{{dbase.salaryunitarr[item.salaryunitindex]}}</div>
                  </div>
                  <div class="rtags wordcut">
                    <span>{{item.adress}}</span>
                    <span>{{dbase.paymodearr[item.paymodeindex]}}</span>
                    <span>招{{item.recruitnum}}人</span>
                  </div>
                  <div class="wel wordcut">
                    <span>{{item.time}}</span>
                  </div>
                  <!-- 发布者 -->
                  <div class="poster wordcut">
                    <!-- if 公司 -->
                    <div class="post-com" v-if="item.isc == 1">
                      <img
                        class="post-comlogo"
                        :src="item.cominfo.logo ? item.cominfo.logo : '/static/images/qy_uplogo.png'"
                        alt
                      >
                      <div class="post-cominfo">
                        <div class="cominfo-name">{{item.cominfo.comname}}</div>
                        <div class="cominfo-tags">
                          <text>{{dbase.companykind[item.cominfo.comkindindex]}}</text>
                          <text>{{dbase.compnayindustry[item.cominfo.compnayindustryindex]}}</text>
                          <text>{{dbase.compnayscale[item.cominfo.compnayscaleindex]}}</text>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>
          </div>
        </Row>
        <div class="more">
           <router-link :to="{ name: 'partjoblist', params: {} }">
          <button class="more-btn">查看更多</button>
          </router-link>
        </div>
      </div>

      <!-- 热门简历 -->
      <div class="card-container">
        <div class="title">
          <span class></span>
          <h2>热门简历</h2>
        </div>
        <Row :gutter="16">
          <div v-for="(item,index) in resumelist" :key="index">
            <Col span="6">
              <Card style="width:260px;margin-top:20px">
                <div class="company" style="text-align:center" @click="toResumedetail(item.id)">
                  <img
                    class="logo avatarimg"
                    :src="item.resumeavatar ? item.resumeavatar : '/static/images/gr_uplogo.png'"
                  >
                  <h3 class="comname wordcut">{{item.name}}</h3>
                  <div class="comtags wordcut">
                    <span>{{dbase.resumedegrees[item.resumedegreesindex]}}</span>
                    <span>{{dbase.resumeexperiences[item.resumeexperiencesindex]}}</span>
                    <span>{{dbase.resumejobcat[item.jobcatindex]}}</span>
                  </div>
                  <div class="wel wordcut" style="margin-top:10px;">
                    <span>{{dbase.resumedegrees[item.resumedegreesindex]}}</span>
                    <span>{{dbase.resumeexperiences[item.resumeexperiencesindex]}}</span>
                    <span>{{dbase.resumejobcat[item.jobcatindex]}}</span>
                  </div>
                  <div class="address wordcut">
                    <!-- {{item.adress}} -->
                  </div>
                </div>
              </Card>
            </Col>
          </div>
        </Row>
        <div class="more">
           <router-link :to="{ name: 'resumelist', params: {} }">
          <button class="more-btn">查看更多</button>
          </router-link>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      companylist: [],
      recruitlist: [],
      resumelist: [],
      partjoblist: [],
      swiperList: [],
      appinfo: [],
      dbase: [],
      swiperOption: {
        pagination: ".swiper-pagination",
        loop: true,
        autoplay: true,
        loop: true
      },
      value3: 0,
      setting: {
        autoplay: false,
        autoplaySpeed: 2000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      }
    };
  },
  created: function() {
    var that = this;
    function getCompanylist() {
      return that.$axios.get(that.$http.apiurl("companyallinfo"));
    }

    function getRecruitlist() {
      return that.$axios.get(that.$http.apiurl("position"));
    }

    function getPartjoblist() {
      return that.$axios.get(that.$http.apiurl("partjobinfo"));
    }

    function getResumelist() {
      return that.$axios.get(that.$http.apiurl("resumeinfo"));
    }

    function getMpinfo() {
      return that.$axios.get(that.$http.apiurl("mpinfo"));
    }

    function getAPPinfo() {
      return that.$axios.get(that.$http.apiurl("ginfo") + "&op=appinfo");
    }
    that.$axios
      .all([
        getCompanylist(),
        getRecruitlist(),
        getPartjoblist(),
        getResumelist(),
        getMpinfo(),
        getAPPinfo()
      ])
      .then(
        that.$axios.spread(function(
          Companylist,
          Recruitlist,
          Partjoblist,
          Resumelist,
          mpinfo,
          appinfo
        ) {
          console.log(Companylist.data);
          console.log(Recruitlist.data);
          console.log(Partjoblist.data);
          console.log(Resumelist.data);
          console.log(mpinfo.data);
          console.log(appinfo.data);
          that.companylist = Companylist.data;
          that.recruitlist = Recruitlist.data;
          that.partjoblist = Partjoblist.data;
          that.resumelist = Resumelist.data;
          that.swiperList = mpinfo.data.slider;
          that.appinfo = appinfo.data;
          that.dbase = mpinfo.data.dbase;
        })
      );
  },
  methods:{
    toCompanydetail(e){
      this.$router.push({name:'companydetail',query:{cid:e}})
    },
    toRecruitdetail(e){
      this.$router.push({name:'recruitdetail',query:{zid:e}})
    },
    toPartjobdetail(e){
      this.$router.push({name:'partjobdetail',query:{pid:e}})
    },
    toResumedetail(e){
      this.$router.push({name:'resumedetail',query:{rid:e}})
    },
  }
};
</script>
<style lang="scss" >
body {
  background-color: #f7f7f7;
}
.demo-carousel {
  width: 1200px;
  height: 400px;

  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

.card-container {
  background-color: #fff;
  padding: 10px;
  margin-top: 50px;

   .stitle {
    padding-bottom: 10px;
    margin: 10px 0;
  }
}

// 入驻的企业
.container-body {
  padding-bottom: 50px;

  .company {
    margin: 10px;

    .logo {
      width: 80px;
      height: 80px;
    }

    .comname {
      height: 22px;
      margin-top: 13px;
      font-size: 16px;
      color: #333;
    }

    .comtags {
      margin-top: 3px;
      color: #999;
      border-bottom: 1px dashed #e0e0e0;
      padding-bottom: 10px;
      height: 32px;
    }

    .wel {
      margin-top: 3px;
      color: #999;

      span {
        display: inline-block;
        height: 26px;
        padding: 0 5px;
        font-size: 12px;
        line-height: 26px;
        color: #999;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
        text-align: center;
      }
    }
    .address {
      margin-top: 10px;
    }
  }
}

// 热门职位
.recruit {
  text-align: left !important;

  .rtitle {
    display: flex;
    justify-content: space-between;

    .title-text {
      font-size: 16px;
      font-weight: 600;
      max-width: 180px;
    }

    .salary-text {
      font-size: 16px;
      font-weight: 600;
      color: red;
    }
  }

  .rtags {
    margin-top: 3px;
    color: #999;
    padding-bottom: 10px;
  }

  .wel {
    margin-top: 3px;
    color: #999;

    span {
      display: inline-block;
      width: 61px;
      height: 26px;
      padding: 0 5px;
      font-size: 12px;
      line-height: 26px;
      color: #999;
      border: 1px solid #f0f0f0;
      border-radius: 3px;
      text-align: center;
    }
  }

  .poster {
    height: 58px;

    .post-com {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px dashed #e0e0e0;

      .post-comlogo {
        float: left;
        width: 20px;
        height: 20px;
      }

      .post-cominfo {
        margin-left: 24px;

        .cominfo-name {
          font-size: 14px;
          color: #333;
          display: flex;
          align-items: center;
        }

        .cominfo-tags {
          color: #0c8;
        }
      }
    }
  }
}
.avatarimg {
  border-radius: 50%;
}
</style>
